/* eslint-disable eqeqeq */
<template>
  <div class="music-container">

    <!-- 背景模糊 -->
    <div class="full"
      :style="{'background-image':`url(${pic})`,
          'opacity':'1',
          'transform':'scale(1.5)',
          'transform-origin':'center center',
          'filter':'blur(30px)'
      }">

    </div>
    <!-- 头部 -->
    <div class="fullscreen"  >
     <div @click="isImg=!isImg">
        <div class="hd">
        <van-icon name="arrow-down"
          @click=" $emit('close')" />
        <div class="hd-name">
          <div class="songN">{{currentMusic.name}}</div>
          <div class="singerN">{{currentMusic.song.artists[0].name}}</div>
        </div>
        <van-icon name="share-o" />
      </div>
      <!-- 主提部分 -->
      <div class="body-container"  v-if="isImg">
        <van-image :style="{'animation-play-state':playState? 'running':'paused'}"
          round
          class="img"
          fit="cover"
          :src="pic" />

        </div>
      <!-- 歌词 -->
      <div class="lyric-box" v-else>
        <ul :style="{'transform':`translateY(-${lyricIndex*24}px)`}">
          <li v-for="(item,index) in this.lyricArray"
            :key="index"
            :class="{'active': index==lyricIndex}">{{item.lyric}}</li>
        </ul>
      </div>

        <!-- 留声机 - 唱臂 -->
      <div v-if="isImg" class="needle" :style="`transform: rotate(${needleDeg});`"></div>
     </div>

      <!-- 底部按钮进度条 和control-->
      <div class="bottom-container">
         <!-- 评论组件 -->
        <Comment></Comment>
        <!-- 进度条时间 -->
        <div class="control-pro">
          <input class="process"
            v-model="timeProcess"
            type="range"
            max="100"
            min="0">
          <!-- 进度时间 -->
          <div class="proTime">
            <div>{{this.currentTime | filterTime}}</div>
            <div>{{this.totalTime | filterTime}}</div>
          </div>
        </div>

        <!-- 底部按钮 control-->
        <div class="btn-bottom">
          <!-- 播放的状态 循环，随机播放-->
          <div class="play-state" @click="isShowLoop=!isShowLoop">
            <i v-if="isShowLoop" class="iconfont icon-loop" ></i>
          <i v-else class="iconfont icon-random"></i>

          </div>
          <!-- 播放的控件，-->
          <div class="control">
            <!-- 上一曲 -->
            <i @click="changeMusic('pre')" class="iconfont icon-shangyiqu"></i>
            <!-- 暂停开始 -->
            <div class="play" @click="play">
              <i class="iconfont icon-bofang"
                v-if="!playState"></i>
              <i v-else class="iconfont icon-zanting"></i>
            </div>
            <!-- 下一曲 -->
            <i @click="changeMusic('next')" class="iconfont icon-xiayiqu"></i>
          </div>
          <!-- 播放列表 -->
          <div class="play-list" @click="isShowPlayList=true">
            <i class="iconfont icon-yinleliebiao"></i>
          </div>
        </div>

      </div>
    </div>

    <!-- 播放列表弹出层 -->
    <van-popup round v-model="isShowPlayList" position="bottom" :style="{ height: '50%'}" >
     <!-- 播放列表组件 -->
     <play-list></play-list>
    </van-popup>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import PlayList from '@/components/Play-List.vue'
import Comment from '@/components/comment/comment.vue'
export default {
  components: { PlayList, Comment },
  props: {
    // 当前音乐信息，包含当前id
    currentMusic: {
      type: Object,
      require: true
    },
    // 当前歌曲时间
    currentTime: {
      type: Number,
      require: true
    },
    // 当前歌曲总时间
    totalTime: Number,
    // 播放状态
    playState: {
      type: Boolean,
      require: true
    }

  },
  data () {
    return {
      lyric: '', // 存放歌词和时间
      isShowPlayList: false,
      currentIndex: 0,
      isImg: true,
      isShowLoop: true
    }
  },
  computed: {
    ...mapState(['playList']),
    needleDeg () { // 留声机-唱臂的位置属性
      return this.playState ? '-7deg' : '-38deg'
    },
    // 图片
    pic () {
      if (this.currentMusic.picUrl) {
        return this.currentMusic.picUrl
      } else {
        return this.currentMusic.al.picUrl
      }
    },
    // 把歌词和事件修改成对象形式
    lyricArray () {
      if (this.lyric === '' || this.lyric.length < 1) return [] // 还没有歌词的时候
      const arr = this.lyric.split('\n')
      arr.pop()
      // console.log(arr)
      // 正则修改歌词[00:00.000] 作词：曲世聪
      const reg = /\[(\d+):(\d+.\d+)\](.*)/
      const lyricArr = arr.map(ly => {
        if (reg.test(ly)) {
          return {
            time: parseInt(RegExp.$1) * 60 + parseFloat(RegExp.$2),
            lyric: RegExp.$3
          }
        }
      })
      // console.log(lyricArr)
      return lyricArr
    },
    // 歌词索引 根据时间找出下标，依赖歌词和当前时间
    lyricIndex () {
      // 如果没有歌词的话
      if (this.lyricArray.length < 1) return 0
      for (const index in this.lyricArray) {
        if (index >= this.lyricArray.length - 1) {
          console.log('最后')
          return this.lyricArray.length - 1
        } else {
          if (this.currentTime > this.lyricArray[parseInt(index)].time && this.lyricArray[parseInt(index) + 1].time > this.currentTime) {
            return index
          }
        }
      }
      return 1
    },

    timeProcess: {
      get () {
        const process = this.currentTime / this.totalTime * 100
        return process
      },
      set (value) {
        console.log(value)
        const ctime = value / 100 * this.totalTime
        this.$emit('changeTime', ctime)
      }
    }
  },
  watch: {
    async currentMusic () {
      const { data: res } = await this.$http.get('/lyric', {
        params: {
          id: this.currentMusic.id
        }
      })

      // 歌词和歌词时间
      this.lyric = res.lrc.lyric
    },
    currentTime (val) {
      if (val === this.totalTime) {
        console.log(11)
        this.changeMusic('next')
      }
    }
  },
  async created () {
    // 获取当前音乐歌词
    const { data: res } = await this.$http.get('/lyric', {
      params: {
        id: this.currentMusic.id
      }
    })

    // 歌词和歌词时间
    this.lyric = res.lrc.lyric
  },
  methods: {

    play () {
      const state = !this.playState
      this.$emit('change-play', state)
    },

    // 上一曲和下一曲
    ...mapMutations(['getCurrentMusic']),
    changeMusic (event) {
      this.playList.find((x, index) => {
        if (x.id === this.currentMusic.id) {
          this.currentIndex = index
          console.log(index)
        }
      })
      // 上一曲
      if (event === 'pre') {
        if (this.currentIndex === 0) {
          this.getCurrentMusic(this.playList[this.playList.length - 1])
        } else { this.getCurrentMusic(this.playList[this.currentIndex - 1]) }

        // console.log(this.playList.length - 1)
      }

      // 下一曲

      if (event === 'next') {
        if (this.currentIndex === this.playList.length - 1) {
          this.getCurrentMusic(this.playList[0])
        } else { this.getCurrentMusic(this.playList[this.currentIndex + 1]) }

        // console.log(this.playList.length - 1)
      }
    }
  }
}
</script>

<style lang="less" scoped>

.music-container{
  .van-popup{
    left: 5%;
    width: 90%;
    background-color: #252525
  }
}
.full{
    background-color: #161824;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: auto 100%;
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}
.fullscreen{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 60px;
    overflow: hidden;
    z-index: 21;
    .needle {
    position: absolute;
    transform-origin: left top;
    background: url("~@/assets/need.png") no-repeat;
    background-size: contain;
    width: 73px;
    height: 118px;
    top: 90px;
    left: 174px;
    transition: all 0.6s;
}
}
.fullscreen-lyric{
   position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 60px;
    // overflow: hidden;
    z-index: 2;
    .lyric-box{
  margin-top: 30px;
  height: 90%;
  text-align: center;
  position: relative;
  overflow: hidden;

  /deep/ ul{
    // position: absolute;
    // top:50% ;
    left: 0;
    font-size: 16px;
    width: 100%;
    color: #fff;
    transition: transform 0.3s linear;
   li{
    //  height: 24px;
      &.active{
        color: red;
        font-size: 18px;
      }
    }
  }
}
}
.hd{
  display: flex;
  padding: 10px;
  justify-content: space-between;
  align-items: center;
  color: #f5f5f5;
  margin: 0 10px;

  .hd-name{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .songN{
      font-size: 18px;

    }
    .singerN{
      font-size: 13px;
    }
  }
}

.body-container{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px 0;

  .van-image{
     width: 100%;
  height: 100%;
  background: url("~@/assets/rongqi.png") no-repeat;
  background-size: 100%;
  }
  .img {

     display: flex;
  justify-content: center;
  align-items: center;
    width: 200px;
    height: 200px;

    animation: rote 15s linear infinite;
  }

   @keyframes rote {
        0%{
          transform: rotate(0deg);
        }
        100%{
          transform: rotate(360deg);
        }
      }
}

.lyric-box{
  margin-top: 40px;
  height: 50vh;
  text-align: center;
  position: relative;
  overflow: hidden;

  /deep/ ul{
    position: absolute;
    top:50% ;
    left: 0;
    right: 0;
    font-size: 16px;
    width: 100%;
    color: #fff;
    transition: transform 0.4s linear;
   li{
     height: 24px;
      &.active{
        color: red;
        // font-size: 18px;
        transform: scale(1.2);
      }
    }
  }
}

.bottom-container{
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
}
.control-pro{

  padding: 0 20px;
 .process{
    width: 100%;
    margin: 0 auto;

  }
  input[type="range"] {

height: 3px;
background-color: #a1a0a0;

  }

  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: #ffffff;
    border-radius: 50%; /*外观设置为圆形*/
    border: solid 1px rgba(205, 224, 230, 0.5); /*设置边框*/

}

  .proTime{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #fff;
  }
}

.btn-bottom{
    display: flex;
    justify-content: space-between;
    align-items: center;

    color: #fff;
    margin: 0 18px;
    .iconfont{
      font-size: 30px;
    }
  .play-state{

  }
  .control{
    display: flex;
    justify-content: space-around;
    align-items: center;
    .play>.iconfont{
      font-size: 50px;
      margin: 0 20px;
    }
  }

  .play-list{

  }
}
</style>
